<template>
    <div class="">
        <ezm-layout>
            <div class="" slot="nav">
                <van-nav-bar
                        title="滚动位置保持列表"
                        left-arrow
                        @click-left="g_navigate.back()"
                ></van-nav-bar>
                <div class="pa-md" style="background-color: #ffe0db;">
                    # 滚动下列列表，点击任意一项内容跳转，再返回到本页，可以看到页面依然保持在离开的位置，异步加载的内容也不会消失
                </div>
            </div>
            <ezm-scroll-box
                    :pull-down="true"
                    :pull-up="true"
                    :paginate="paginate"
            >
                <van-cell
                        is-link
                        v-for="item in list" :key="item.id"
                        :title="item.title"
                        :label="item.label"
                        :value="item.id"
                        @click="g_navigate.to('/BetterScrollPos2')"
                ></van-cell>
            </ezm-scroll-box>
        </ezm-layout>
    </div>
</template>

<script>
    import EzmLayout from "@/components/layout/ezm-layout";
    import EzmScrollBox from "@/components/scroll/ezm-scroll-box";
    import Paginate from "@/utils/paginate.util";
    import {mockUtil} from "@/utils/common.util";
    import {request} from "@/utils/request.util";
    import {PageMixin} from "@/mixin/navigate.mixin";

    export default {
        name: 'BetterScrollPos',
        mixins: [PageMixin],
        components: {EzmScrollBox, EzmLayout},
        props: {},
        data() {
            return {
                paginate: new Paginate(this.getList),
                list: [],
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
            init() {
                this.paginate.autoPullDown();
            },
            getList(refresh = true) {
                this.mockData();
                request('BetterScrollPos').get(this.paginate.getRequestParams()).then(resp => {
                    this.list = refresh ? resp.records : this.list.concat(resp.records);
                    this.paginate.finishLoading(resp);
                }).catch(_ => this.paginate.finishLoading());
            },
            mockData() {
                mockUtil.mock(/BetterScrollPos/i, 'get', {
                    code: 200,
                    message: '',
                    data: {
                        current: this.paginate.toPage,
                        size: this.paginate.size,
                        [`records|${this.paginate.toPage <= 2 ? this.paginate.size : 5}`]: [{
                            'id|+1': (this.paginate.toPage - 1) * this.paginate.size + 1,
                            'title': '@cname',
                            'label': '@name',
                        }]
                    }
                })
            }
        }
    };
</script>

<style lang="less">

</style>